<!DOCTYPE html>

<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/mystyle.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../http/request.js"></script>
    <style>
        .box-card {
            margin: 20px;
        }
    </style>
</head>

<body class="hold-transition">
    <div id="app">
        <el-card class="box-card">
            <!-- 添加管理组按钮 -->
            <el-button type="primary" size="default" icon="el-icon-plus" @click="createDialogFormVisible = true">添加管理组
            </el-button>
            <!-- 表格组件：展示数据列表 -->
            <el-table style="margin: 10px 0;" :data="tableData" border row-key>
                <el-table-column label="序号" width="80px" align="center" type="index"></el-table-column>
                <el-table-column label="取件员key" align="center" prop="takeKey"></el-table-column>
                <el-table-column label="送件员key" align="center" prop="sendKey"></el-table-column>
                <el-table-column label="区域" align="center">
                    <template slot-scope="scope">
                        {{scope.row.area.join(',')}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="warning" size="default" icon="el-icon-edit" @click="edit(scope.row)">修改
                        </el-button>
                        <el-button type="danger" disabled size="default" icon="el-icon-delete"
                            @click="delete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog title="收货地址" :visible.sync="createDialogFormVisible">
            <el-form>
                <el-form-item label="取件员key" :label-width="formLabelWidth">
                    <el-input v-model="takeKey"></el-input>
                </el-form-item>
                <el-form-item label="送件员key" :label-width="formLabelWidth">
                    <el-input v-model="sendKey"></el-input>
                </el-form-item>
                <el-form-item label="区域" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="area">
                        <el-checkbox label="静园1"></el-checkbox>
                        <el-checkbox label="静园2"></el-checkbox>
                        <el-checkbox label="静园3"></el-checkbox>
                        <el-checkbox label="静园4A"></el-checkbox>
                        <el-checkbox label="静园4B"></el-checkbox>
                        <el-checkbox label="静园5A"></el-checkbox>
                        <el-checkbox label="静园5B"></el-checkbox>
                        <el-checkbox label="静园6A"></el-checkbox>
                        <el-checkbox label="静园6B"></el-checkbox>
                        <el-checkbox label="静园7A"></el-checkbox>
                        <el-checkbox label="静园7B"></el-checkbox>
                        <el-checkbox label="静园8A"></el-checkbox>
                        <el-checkbox label="静园8B"></el-checkbox>
                        <el-checkbox label="静园9A"></el-checkbox>
                        <el-checkbox label="静园9B"></el-checkbox>
                        <el-checkbox label="静园10A"></el-checkbox>
                        <el-checkbox label="静园10B"></el-checkbox>
                        <el-checkbox label="静园11A"></el-checkbox>
                        <el-checkbox label="静园11B"></el-checkbox>
                        <el-checkbox label="静园12A"></el-checkbox>
                        <el-checkbox label="静园12B"></el-checkbox>
                        <el-checkbox label="静园13A"></el-checkbox>
                        <el-checkbox label="静园13B"></el-checkbox>
                        <el-checkbox label="静园14A"></el-checkbox>
                        <el-checkbox label="静园14B"></el-checkbox>
                        <el-checkbox label="静园15A"></el-checkbox>
                        <el-checkbox label="静园15B"></el-checkbox>
                        <el-checkbox label="静园16"></el-checkbox>

                        <el-checkbox label="怡园1A"></el-checkbox>
                        <el-checkbox label="怡园1B"></el-checkbox>
                        <el-checkbox label="怡园2A"></el-checkbox>
                        <el-checkbox label="怡园2B"></el-checkbox>
                        <el-checkbox label="怡园3A"></el-checkbox>
                        <el-checkbox label="怡园3B"></el-checkbox>
                        <el-checkbox label="怡园4A"></el-checkbox>
                        <el-checkbox label="怡园4B"></el-checkbox>
                        <el-checkbox label="怡园5A"></el-checkbox>
                        <el-checkbox label="怡园5B"></el-checkbox>
                        <el-checkbox label="怡园6A"></el-checkbox>
                        <el-checkbox label="怡园6B"></el-checkbox>
                        <el-checkbox label="怡园7A"></el-checkbox>
                        <el-checkbox label="怡园7B"></el-checkbox>
                        <el-checkbox label="怡园8A"></el-checkbox>
                        <el-checkbox label="怡园8B"></el-checkbox>
                        <el-checkbox label="怡园9A"></el-checkbox>
                        <el-checkbox label="怡园9B"></el-checkbox>
                        <el-checkbox label="怡园10A"></el-checkbox>
                        <el-checkbox label="怡园10B"></el-checkbox>
                        <el-checkbox label="怡园11A"></el-checkbox>
                        <el-checkbox label="怡园11B"></el-checkbox>
                        <el-checkbox label="怡园12A"></el-checkbox>
                        <el-checkbox label="怡园12B"></el-checkbox>
                        <el-checkbox label="怡园13"></el-checkbox>
                        <el-checkbox label="怡园14"></el-checkbox>
                        <el-checkbox label="怡园15"></el-checkbox>
                        <el-checkbox label="怡园16"></el-checkbox>

                        <el-checkbox label="弘毅楼A"></el-checkbox>
                        <el-checkbox label="弘毅楼B"></el-checkbox>
                        <el-checkbox label="弘毅楼C"></el-checkbox>
                        <el-checkbox label="文锦苑1"></el-checkbox>
                        <el-checkbox label="文锦苑2"></el-checkbox>
                        <el-checkbox label="文锦苑3"></el-checkbox>
                        <el-checkbox label="文澜苑1"></el-checkbox>
                        <el-checkbox label="文澜苑2"></el-checkbox>
                        <el-checkbox label="文韬苑1"></el-checkbox>
                        <el-checkbox label="文韬苑2"></el-checkbox>
                        <el-checkbox label="文韬苑3"></el-checkbox>
                        <el-checkbox label="清逸苑1"></el-checkbox>
                        <el-checkbox label="清逸苑2"></el-checkbox>
                        <el-checkbox label="清逸苑3"></el-checkbox>
                        <el-checkbox label="清雅苑1"></el-checkbox>
                        <el-checkbox label="清雅苑2"></el-checkbox>
                        <el-checkbox label="清隽苑1"></el-checkbox>
                        <el-checkbox label="清隽苑2"></el-checkbox>
                        <el-checkbox label="清隽苑3"></el-checkbox>

                        <el-checkbox label="西操场"></el-checkbox>
                        <el-checkbox label="西餐厅"></el-checkbox>
                        <el-checkbox label="西浴"></el-checkbox>
                        <el-checkbox label="西服务中心"></el-checkbox>
                        <el-checkbox label="西篮球场"></el-checkbox>
                        <el-checkbox label="东操场"></el-checkbox>
                        <el-checkbox label="东餐厅"></el-checkbox>
                        <el-checkbox label="东浴"></el-checkbox>
                        <el-checkbox label="东服务中心"></el-checkbox>
                        <el-checkbox label="东篮球场"></el-checkbox>
                        <el-checkbox label="图书馆"></el-checkbox>
                        <el-checkbox label="体育馆"></el-checkbox>
                        <el-checkbox label="菜鸟驿站"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="createDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="create">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="收货地址" :visible.sync="editDialogFormVisible">
            <el-form>
                <el-form-item label="取件员key" :label-width="formLabelWidth">
                    <el-input v-model="editTakeKey"></el-input>
                </el-form-item>
                <el-form-item label="送件员key" :label-width="formLabelWidth">
                    <el-input v-model="editSendKey"></el-input>
                </el-form-item>
                <el-form-item label="区域" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="editArea">
                        <el-checkbox label="静园1"></el-checkbox>
                        <el-checkbox label="静园2"></el-checkbox>
                        <el-checkbox label="静园3"></el-checkbox>
                        <el-checkbox label="静园4A"></el-checkbox>
                        <el-checkbox label="静园4B"></el-checkbox>
                        <el-checkbox label="静园5A"></el-checkbox>
                        <el-checkbox label="静园5B"></el-checkbox>
                        <el-checkbox label="静园6A"></el-checkbox>
                        <el-checkbox label="静园6B"></el-checkbox>
                        <el-checkbox label="静园7A"></el-checkbox>
                        <el-checkbox label="静园7B"></el-checkbox>
                        <el-checkbox label="静园8A"></el-checkbox>
                        <el-checkbox label="静园8B"></el-checkbox>
                        <el-checkbox label="静园9A"></el-checkbox>
                        <el-checkbox label="静园9B"></el-checkbox>
                        <el-checkbox label="静园10A"></el-checkbox>
                        <el-checkbox label="静园10B"></el-checkbox>
                        <el-checkbox label="静园11A"></el-checkbox>
                        <el-checkbox label="静园11B"></el-checkbox>
                        <el-checkbox label="静园12A"></el-checkbox>
                        <el-checkbox label="静园12B"></el-checkbox>
                        <el-checkbox label="静园13A"></el-checkbox>
                        <el-checkbox label="静园13B"></el-checkbox>
                        <el-checkbox label="静园14A"></el-checkbox>
                        <el-checkbox label="静园14B"></el-checkbox>
                        <el-checkbox label="静园15A"></el-checkbox>
                        <el-checkbox label="静园15B"></el-checkbox>
                        <el-checkbox label="静园16"></el-checkbox>

                        <el-checkbox label="怡园1A"></el-checkbox>
                        <el-checkbox label="怡园1B"></el-checkbox>
                        <el-checkbox label="怡园2A"></el-checkbox>
                        <el-checkbox label="怡园2B"></el-checkbox>
                        <el-checkbox label="怡园3A"></el-checkbox>
                        <el-checkbox label="怡园3B"></el-checkbox>
                        <el-checkbox label="怡园4A"></el-checkbox>
                        <el-checkbox label="怡园4B"></el-checkbox>
                        <el-checkbox label="怡园5A"></el-checkbox>
                        <el-checkbox label="怡园5B"></el-checkbox>
                        <el-checkbox label="怡园6A"></el-checkbox>
                        <el-checkbox label="怡园6B"></el-checkbox>
                        <el-checkbox label="怡园7A"></el-checkbox>
                        <el-checkbox label="怡园7B"></el-checkbox>
                        <el-checkbox label="怡园8A"></el-checkbox>
                        <el-checkbox label="怡园8B"></el-checkbox>
                        <el-checkbox label="怡园9A"></el-checkbox>
                        <el-checkbox label="怡园9B"></el-checkbox>
                        <el-checkbox label="怡园10A"></el-checkbox>
                        <el-checkbox label="怡园10B"></el-checkbox>
                        <el-checkbox label="怡园11A"></el-checkbox>
                        <el-checkbox label="怡园11B"></el-checkbox>
                        <el-checkbox label="怡园12A"></el-checkbox>
                        <el-checkbox label="怡园12B"></el-checkbox>
                        <el-checkbox label="怡园13"></el-checkbox>
                        <el-checkbox label="怡园14"></el-checkbox>
                        <el-checkbox label="怡园15"></el-checkbox>
                        <el-checkbox label="怡园16"></el-checkbox>

                        <el-checkbox label="弘毅楼A"></el-checkbox>
                        <el-checkbox label="弘毅楼B"></el-checkbox>
                        <el-checkbox label="弘毅楼C"></el-checkbox>
                        <el-checkbox label="文锦苑1"></el-checkbox>
                        <el-checkbox label="文锦苑2"></el-checkbox>
                        <el-checkbox label="文锦苑3"></el-checkbox>
                        <el-checkbox label="文澜苑1"></el-checkbox>
                        <el-checkbox label="文澜苑2"></el-checkbox>
                        <el-checkbox label="文韬苑1"></el-checkbox>
                        <el-checkbox label="文韬苑2"></el-checkbox>
                        <el-checkbox label="文韬苑3"></el-checkbox>
                        <el-checkbox label="清逸苑1"></el-checkbox>
                        <el-checkbox label="清逸苑2"></el-checkbox>
                        <el-checkbox label="清逸苑3"></el-checkbox>
                        <el-checkbox label="清雅苑1"></el-checkbox>
                        <el-checkbox label="清雅苑2"></el-checkbox>
                        <el-checkbox label="清隽苑1"></el-checkbox>
                        <el-checkbox label="清隽苑2"></el-checkbox>
                        <el-checkbox label="清隽苑3"></el-checkbox>

                        <el-checkbox label="西操场"></el-checkbox>
                        <el-checkbox label="西餐厅"></el-checkbox>
                        <el-checkbox label="西浴"></el-checkbox>
                        <el-checkbox label="西服务中心"></el-checkbox>
                        <el-checkbox label="西篮球场"></el-checkbox>
                        <el-checkbox label="东操场"></el-checkbox>
                        <el-checkbox label="东餐厅"></el-checkbox>
                        <el-checkbox label="东浴"></el-checkbox>
                        <el-checkbox label="东服务中心"></el-checkbox>
                        <el-checkbox label="东篮球场"></el-checkbox>
                        <el-checkbox label="图书馆"></el-checkbox>
                        <el-checkbox label="体育馆"></el-checkbox>
                        <el-checkbox label="菜鸟驿站"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editConfirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>


<script>
    var vue = new Vue({
        el: '#app',
        data: {
            id: '',
            takeKey: '',
            sendKey: '',
            area: [],
            editTakeKey: '',
            editSendKey: '',
            editArea: [],
            createDialogFormVisible: false,
            editDialogFormVisible: false,
            tableData: [],
            formLabelWidth: '120px'
        },
        methods: {
            async create() {
                const result = await axios({
                    method: 'POST',
                    url: '/admin/manage/insert',
                    data: {
                        takeKey: this.takeKey,
                        sendKey: this.sendKey,
                        area: this.area
                    }
                })
                if (result.code === 1) {
                    this.takeKey = ''
                    this.sendKey = ''
                    this.area = []
                    await this.getAllManagerList()
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    })
                    this.createDialogFormVisible = false
                }
            },
            async edit(item) {
                this.id = item.id
                this.editTakeKey = item.takeKey
                this.editSendKey = item.sendKey
                this.editArea = item.area
                this.editDialogFormVisible = true
            },
            async editConfirm() {
                const result = await axios({
                    method: 'PUT',
                    url: '/admin/manage/update',
                    data: {
                        id: this.id,
                        takeKey: this.editTakeKey,
                        sendKey: this.editSendKey,
                        area: this.editArea,
                    }
                })
                if (result.code === 1) {
                    await this.getAllManagerList()
                    this.$message({
                        showClose: true,
                        message: '修改成功',
                        type: 'success'
                    })
                    this.editDialogFormVisible = false
                }
            },
            delete(item) {
                console.log(item.id)
            },
            async getAllManagerList() {
                const result = await axios({ method: 'GET', url: '/admin/manage/selectAll' })
                this.tableData = result.data
            }
        },
        async mounted() {
            await this.getAllManagerList()
        },
    })

</script>

</html>